<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>首页轮播图管理</span>
        <el-button style="float:right" type="primary" size="small" @click="openAdd">新增</el-button>
      </div>

      <el-row>
        <el-col :span="24">
          <el-table :data="list" stripe style="width:100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column label="图片" min-width="160">
              <template slot-scope="scope">
                <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" style="height:60px;" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="140" />
            <el-table-column prop="createTime" label="创建时间" min-width="180" />
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="preview(scope.row)">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div style="margin-top:16px; text-align:right">
        <el-button type="primary" size="small" @click="fetchList">刷新</el-button>
      </div>
    </el-card>

    <el-dialog title="新增轮播图" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="图片URL" prop="imageUrl">
          <el-input v-model="form.imageUrl" placeholder="请输入图片地址或粘贴图片链接" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="form.type" placeholder="例如：banner" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listHomepageImage, insertHomepageImage } from '@/api/homepageImage'

export default {
  name: 'Branner',
  data() {
    return {
      list: [],
      loading: false,
      dialogVisible: false,
      form: {
        imageUrl: '',
        type: ''
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.loading = true
      listHomepageImage({ page: 1, limit: 100 }).then(res => {
        // 根据后端返回结构可能为 { code, data, message }
        if (res && res.data) {
          this.list = res.data
        } else if (Array.isArray(res)) {
          this.list = res
        } else if (res && res.length) {
          this.list = res
        } else {
          this.list = []
        }
      }).catch(() => {
        this.$message.error('获取列表失败')
      }).finally(() => {
        this.loading = false
      })
    },
    openAdd() {
      this.form = { imageUrl: '', type: '' }
      this.dialogVisible = true
    },
    submitAdd() {
      if (!this.form.imageUrl) {
        this.$message.warn('图片地址不能为空')
        return
      }
      insertHomepageImage(this.form).then(res => {
        this.$message.success('新增成功')
        this.dialogVisible = false
        this.fetchList()
      }).catch(() => {
        this.$message.error('新增失败')
      })
    },
    preview(row) {
      if (row && row.imageUrl) {
        window.open(row.imageUrl)
      } else {
        this.$message.info('无图片可预览')
      }
    }
  }
}
</script>

<style scoped>
.divBox { padding: 12px }
</style>
